<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button class="js_btn">添加</button>
        <ul class="js_content">
        </ul>
	</body>
    <script>
    /*总结:DocumentFragment到后面会快，innerHTML第一次很快，后面会越来越慢*/
    //普通款
    var fn1 = function(){
        var ndContent = document.querySelector('.js_content');
        var a = new Date();
        for(var i=0;i<10000;i++){
            var ndLi = document.createElement('li');
            ndLi.innerHTML = i;
            ndContent.appendChild(ndLi);
        }
        var b = new Date();
        alert(b-a);
    }
    //利用字符串
    var fn2 = function(){
        var ndContent = document.querySelector('.js_content');
        var a = new Date();
        var str = "";
        for(var i=0;i<10000;i++){
            str +="<li>"+i+"</li>";
        }
        ndContent.innerHTML += str;
        var b = new Date();
        alert(b-a);
    }
    //利用DocumentFragment
    var fn3 = function(){
        var ndContent = document.querySelector('.js_content');
        var a = new Date();
        var fragment = document.createDocumentFragment();
        for(var i=0;i<10000;i++){
             var ndLi = document.createElement('li');
             ndLi.innerHTML = i;
             fragment.appendChild(ndLi);
        }
        ndContent.appendChild(fragment);
        var b = new Date();
        alert(b-a);
    }
    var btn = document.querySelector('.js_btn');
    btn.addEventListener('click',function(){
        fn1();
        //fn2();
        //fn3();
    });
    fn1();
    //fn2();
    //fn3();
    </script>
</html>